<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="formInline.roleName" placeholder="" style="width: 180px" clearable />
        </el-form-item>
        <el-form-item label="角色权限">
          <el-input v-model="formInline.roleKey" placeholder="" style="width: 180px" clearable />
        </el-form-item>
        <el-form-item>
          <el-form-item label="角色状态">
            <el-select v-model="formInline.status" placeholder="" style="width: 180px" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="searchbutton">搜索</el-button>
          <el-button type="primary" @click="addbutton">新增</el-button>
          <el-button type="primary" @click="xgbutton">修改</el-button>
          <el-button type="primary" @click="deletebutton">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist" border max-height="500" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="roleName" label="角色名称" />
          <el-table-column prop="remark" label="角色权限" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column prop="address" label="角色状态">
            <template #default="scope">
              <span type="primary">正常</span>
              <span type="warning">停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" />
        </el-table>
        <div class="fybox">
          <el-pagination
            v-model:current-page="formInline.pageNum"
            v-model:page-size="formInline.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager"
            :total="pagetotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="角色详情" width="600" :before-close="handleClose">
      <el-form :model="ruleForm" label-width="auto" ref="ruleFormRef" :rules="rules">
        <el-form-item label="角色名称" prop="roleName"> <el-input v-model="ruleForm.roleName" /> </el-form-item>

        <el-form-item label="角色权限" prop="roleKey">
          <el-input v-model="ruleForm.roleKey" />
        </el-form-item>
        <el-form-item label="角色排序" prop="roleSort">
          <el-input v-model="ruleForm.roleSort" />
        </el-form-item>

        <el-form-item label="数据范围" prop="dataScope">
          <el-select v-model="ruleForm.dataScope">
            <el-option v-for="item in sjfwlist" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="菜单树选择项是否关联显示" prop="menuCheckStrictly">
          <el-select v-model="ruleForm.menuCheckStrictly">
            <el-option v-for="item in cdlist" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="角色状态" prop="status">
          <el-select v-model="ruleForm.status" placeholder="" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="菜单" prop="remark">
          <Selectoption
            v-if="showcdlist"
            :treeFilterData="treeFilterData"
            :treeHxlist="treeHxlist"
            :dfProps="dfProps"
            @checKedId="gettreelist"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getRouters, jslist, addroleApi, cxjsApi, xgajsApi, deldejsid } from "@/api/system/system.js";
import Selectoption from "@/components/myselect/index.vue";
import authMenuList from "@/assets/json/authMenuList.json";
const router = useRouter();
let showcdlist = ref(false);

const formInline = ref({
  roleName: "",
  roleKey: "",
  status: "",
  pageNum: 1,
  pageSize: 10
});
const treeFilterData = ref([]);
let dfProps = ref({
  children: "children",
  label: "title"
});
treeFilterData.value = authMenuList.data;
const treeHxlist = ref([]);
function changeTreeFilter() {}
let dialogVisible = ref(false);
let datalist = ref([
  {
    date: "张三",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
]);
const cdlist = [
  {
    id: 1,
    name: "父子不互相关联显示"
  },
  {
    id: 2,
    name: "父子不互相关联显示"
  }
];
const bmlist = [
  {
    id: 1,
    name: "父子不互相关联显示"
  },
  {
    id: 2,
    name: "父子互相关联显示"
  }
];
const sjfwlist = [
  {
    id: "1",
    name: "所有数据权限"
  },
  {
    id: "2",
    name: "自定义数据权限"
  },
  {
    id: "3",
    name: "本部门数据权限"
  },
  {
    id: "4",
    name: "本部门及以下数据权限"
  },
  {
    id: "5",
    name: "仅本人数据权限"
  }
];
const ruleFormRef = ref();
const rules = reactive({
  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注信息", trigger: "blur" }],
  roleKey: [{ required: true, message: "请输入角色权限字符串", trigger: "blur" }],
  roleSort: [{ required: true, message: "请输入角色顺序", trigger: "blur" }],
  dataScope: [{ required: true, message: "请选择数据权限", trigger: "change" }],
  status: [{ required: true, message: "请选择数据权限", trigger: "change" }],
  menuCheckStrictly: [{ required: true, message: "请选择菜单树选择项是否关联显示", trigger: "change" }]
});
let ruleForm = ref({
  roleName: "",
  roleKey: "",
  roleSort: 0,
  dataScope: "1",
  status: "0",
  remark: "",
  menuIds: []
});
const options = [
  {
    value: "0",
    label: "正常"
  },
  {
    value: "1",
    label: "停用"
  }
];

let handleSizeChange = () => {
  getlist();
};
let handleCurrentChange = () => {
  getlist();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
  showcdlist.value = false;
};
const searchbutton = () => {
  getlist();
};
const handleClose = done => {
  dialogVisible.value = false;
};
const addbutton = () => {
  showcdlist.value = true;
  xgstatus.value = false;
  dialogVisible.value = true;
};
const xgbutton = () => {
  showcdlist.value = true;
  if (selection.value.length == 1) {
    cxjsApi({
      roleId: selection.value[0].roleId
    }).then(res => {
      dialogVisible.value = true;
      ruleForm.value = res.data;
      xgstatus.value = true;
      treeHxlist.value = res.data.menuIds;
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
const deletebutton = () => {
  if (selection.value.length == 1) {
    ElMessageBox.confirm("确定删除?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      deldejsid({
        e: selection.value[0].roleId
      }).then(res => {
        ElMessage({
          type: "success",
          message: `${res.msg}`
        });
        getlist();
      });
    });
  } else {
    ElMessage({
      message: "请选择一条数据",
      type: "warning"
    });
  }
};
let selection = ref([]);
const handleSelectionChange = e => {
  selection.value = e;
};
let xgstatus = ref(false);
function savebutton(formEl) {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      //修改
      if (xgstatus.value == true) {
        console.log(ruleForm.value);
        xgajsApi(ruleForm.value).then(() => {
          ElMessage({
            message: "修改成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          xgstatus.value = false;
          //刷新列表数据
          getlist();
          showcdlist.value = false;
        });
      } else {
        //新增
        addroleApi(ruleForm.value).then(() => {
          ElMessage({
            message: "新增成功",
            type: "success"
          });
          formEl.resetFields();
          dialogVisible.value = false;
          getlist();
          showcdlist.value = false;
        });
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
getRout();
function getRout() {
  getRouters().then(res => {});
}
let pagetotal = ref(0);
getlist();
// 获取字典列表
function getlist() {
  jslist({
    pageNum: formInline.value.pageNum,
    pageSize: formInline.value.pageSize,
    roleName: formInline.value.roleName,
    roleKey: formInline.value.roleKey,
    status: formInline.value.status,
    beginTime: "",
    endTime: ""
  }).then(res => {
    datalist.value = res.rows;
    pagetotal.value = res.total;
  });
}
function gettreelist(val) {
  ruleForm.value.menuIds = val;
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409eff;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
</style>
